<template>
  <div class="form-box">
    <el-form
      ref="elForm"
      width="600px"
      :model="info"
      size="medium"
      label-width="135px"
      style="max-width: 1200px"
    >
      <el-form-item label="平台接入方式" prop="isPlatformMethod">
        <el-select v-model="form.isPlatformMethod" :style="{ width: '100%' }">
          <el-option label="28181" value="28181" />
        </el-select>
      </el-form-item>
      <el-form-item label="传输协议" prop="transferProtocol">
        <el-select v-model="form.transferProtocol" :style="{ width: '100%' }">
          <el-option label="UDP" value="UDP" />
        </el-select>
      </el-form-item>
      <el-form-item label="白名单">
        <el-button>编辑</el-button>
      </el-form-item>
      <el-divider />
      <el-form-item label="" prop="iSaveEnergyEnable">
        <el-checkbox
          v-model="form.iSaveEnergyEnable"
          :true-label="1"
          :false-label="0"
          >启用</el-checkbox
        >
      </el-form-item>
      <el-form-item label="协议版本" prop="protocolVersion">
        <el-select v-model="form.protocolVersion" :style="{ width: '100%' }">
          <el-option label="GB/T28181-2016" value="0" />
          <el-option label="GB/T28181-2017" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="SIP服务器ID" prop="sipId">
        <el-input
          type="number"
          v-model="form.sipId"
          placeholder="请输入"
          :style="{ width: '100%' }"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="SIP服务器域" prop="sipDomain">
        <el-input
          type="number"
          v-model="form.sipDomain"
          placeholder="请输入"
          :style="{ width: '100%' }"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="SIP服务器地址" prop="sipAddress">
        <el-input
          v-model="form.sipAddress"
          placeholder="请输入"
          :style="{ width: '100%' }"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="SIP服务器端口" prop="sipPort">
        <el-input
          type="number"
          v-model="form.sipPort"
          placeholder="请输入"
          :style="{ width: '100%' }"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="SIP用户名" prop="sipUserName">
        <el-input
          type="number"
          v-model="form.sipUserName"
          placeholder="请输入"
          :style="{ width: '100%' }"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="SIP用户认证ID" prop="sipUserNameId">
        <el-input
          type="number"
          v-model="form.sipUserNameId"
          placeholder="请输入"
          :style="{ width: '100%' }"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          v-model="form.password"
          placeholder="请输入"
          :style="{ width: '100%' }"
          show-password
        >
        </el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="passwordConfirm">
        <el-input
          type="password"
          v-model="form.passwordConfirm"
          placeholder="请输入"
          :style="{ width: '100%' }"
          show-password
        >
        </el-input>
      </el-form-item>
      <el-form-item label="注册有效期" prop="validityPeriod">
        <el-input
          type="number"
          v-model="form.validityPeriod"
          placeholder="请输入"
          :style="{ width: '100%' }"
        >
          <template slot="append"><span>秒</span></template>
        </el-input>
      </el-form-item>
      <el-form-item label="注册状态" prop="validityStatus">
        <el-select v-model="form.validityStatus" :style="{ width: '100%' }">
          <el-option label="在线" :value="0" />
          <el-option label="离线" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="心跳周期" prop="cycles">
        <el-input
          type="number"
          v-model="form.cycles"
          placeholder="请输入"
          :style="{ width: '100%' }"
        >
          <template slot="append"><span>秒</span></template>
        </el-input>
      </el-form-item>
      <el-form-item label="本地SIP端口" prop="sipPortLocal">
        <el-input
          type="number"
          v-model="form.sipPortLocal"
          placeholder="请输入"
          :style="{ width: '100%' }"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="28181码流索引" prop="mainStream">
        <el-select v-model="form.mainStream" :style="{ width: '100%' }">
          <el-option label="主码流(定时)" :value="0" />
          <el-option label="子码流(定时)" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="注册间隔" prop="intervalSpace">
        <el-input
          type="number"
          v-model="form.intervalSpace"
          placeholder="请输入"
          :style="{ width: '100%' }"
        >
          <template slot="append"><span>秒</span></template>
        </el-input>
      </el-form-item>
      <el-form-item label="最大心跳超时次数" prop="maxHeartbeat">
        <el-input
          type="number"
          v-model="form.maxHeartbeat"
          placeholder="请输入"
          :style="{ width: '100%' }"
        >
          <template slot="append"><span>秒</span></template>
        </el-input>
      </el-form-item>
      <el-form-item label="编码ID">
        <el-tabs v-model="activeName" class="demo-tabs">
          <el-tab-pane label="报警输入编码ID" name="first"> </el-tab-pane>
          <el-tab-pane label="视频通道编码ID" name="second"></el-tab-pane>
          <el-tab-pane label="语音输出通道编码ID" name="third"></el-tab-pane>
        </el-tabs>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="number" label="通道号" width="180" />
          <el-table-column prop="id" label="通道编码ID" />
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          size="small"
          style="width: 120px"
          @click="submitForm"
          :loading="isLoading"
          >保存
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  getNetworPeripheralsFillApi,
  editNetworPeripheralsFillApi,
} from "@/api/network";

export default {
  props: {
    info: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      activeName: "first",
      isLoading: false,
      form: {
        isPlatformMethod: "28181",
        transferProtocol: "UDP",
        iSaveEnergyEnable: 0,
        protocolVersion: "0",
        sipId: 34020001002000000001,
        sipDomain: 3402000100,
        sipAddress: "192.168.103.235",
        sipPort: "5060",
        sipAddress: "192.168.103.235",
        sipUserName: 34020000001320000234,
        sipUserNameId: 34020000001320000234,
        password: "111111",
        passwordConfirm: "111111",
        validityPeriod: 3600,
        validityStatus: 0,
        cycles: 3600,
        mainStream: 0,
        sipPortLocal: 5060,
        intervalSpace: 60,
        maxHeartbeat: 3,
      },
      tableData: [
        {
          number: "1",
          id: "34020000001320001234",
        },
        {
          number: "2",
          id: "34020000001320001235",
        },
      ],
    };
  },
  created() {
    // this.getInfo();
  },
  methods: {
    submitForm() {
      return false;
      this.isLoading = false;
      editNetworPeripheralsFillApi(this.form).then((res) => {
        this.form = res;
        this.isLoading = false;
        this.$message({
          type: "success",
          message: "成功!",
        });
      });
    },
    getInfo() {
      getNetworPeripheralsFillApi().then((res) => {
        this.form = { ...this.form, ...res };
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.form-box {
  width: 600px;
  .el-form-item {
    margin-bottom: 10px;
  }
  .el-divider--horizontal {
    margin: 10px 0;
  }
}
</style>
